/**
* @file 我的抢购
* @author 张超
* @created 2023/7/05 08:00
* @updated 2023/7/05 18:00
*/
<template>
	<view class="pinl">
		<u-tabs :list="list" active-color="#b78c3d" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="cont" v-if="listItem.length>0">
			<view class="order-item-box" @click="goOrderDetail(item.id)" v-for="(item,index) in listItem" :key="index">
				<view class="order-top space-between fz14">
					<view class="">
						流水号：{{item.pay_code}}
					</view>
					<view class="c-d00000">
						{{item.status_text}}
					</view>
				</view>
				<view class="order-info-box flex">
					<image class="mr10" :src="item.image_text" mode=""></image>
					<view class="goods-description">
						<view class="fz15 bold mb8 goods-title-box">
							{{item.title}}
						</view>
						<view class="space-between1">
							<view class="c6">
								{{item.pay_amount}}健康值
							</view>
							<view class="cc2">
								<image v-for="(v,i) in item.images_text" :key="i+'q'" class="content_top_right_user"
									:src="v" mode="" :style="{zIndex:100+i}"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="kong">
			<image src="@/static/my/page.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		priceConfig,
		passList,
		doDrder
	} from '@/network/api.js'
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '进行中'
				}, {
					name: '抢购成功'
				}, {
					name: '抢购失败'
				}],
				current: 0,
				// 是否显示支付弹框
				show: false,
				// 支付数据
				zhif: {},
				listItem: [],
				page: 1
			}
		},
		onLoad(option) {
			if(option.current!=''){
				this.current=option.current
				this.orderListRe()
			}else{
				this.orderListRe()
			}
		},
		onShow() {
			this.orderListRe()
		},
		filters: {
			// 过滤小数点后面数据
			xiaos(num) {
				return Math.trunc(num)
			},
		},
		onReachBottom() {
			this.page += 1
			this.orderListRe()
		},
		methods: {
			// 获取订单列表
			orderListRe() {
				let data = {
					page: this.page,
					pagesize: 10,
					type: this.current
				}
				passList(data).then(res => {
					if (res.code == 1) {
						if (this.page == 1) {
							this.listItem = res.data.data
						} else {
							this.listItem = [...this.listItem,...res.data.data]
						}
					}
				})
			},
			change(index) {
				this.current = index
				this.page = 1
				this.listItem = []
				this.orderListRe()
			},


			// 跳转到订单详情
			goOrderDetail(ids) {
				let data={
					id:ids,
					fanhtype:2
				}
				uni.navigateTo({
					url: '/pages/subpackage/shop/puzzleDetail?data='+JSON.stringify(data)
				})
			}
		},
	}
</script>
<style>
	page{
		background-color: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.pinl{
		background-color: #F3F3F3;
		.cont {
			margin: 0 20rpx;

			.order-item-box {
				background-color: #ffffff;
				margin-top: 20rpx;

				.order-top {
					height: 86rpx;
					padding: 0 28rpx;
					box-sizing: border-box;
				}

				.order-info-box {
					border-top: 1rpx solid #E6E6E6;
					border-bottom: 1rpx solid #E6E6E6;
					padding: 20rpx 30rpx;

					image {
						width: 166rpx;
						height: 166rpx;
						border-radius: 10rpx;
					}

					.goods-description {
						width: calc(100vw - 300rpx);

						.goods-title-box {
							width: calc(100vw - 246rpx);
							overflow: hidden; //超出文本隐藏
							text-overflow: ellipsis; ///超出部分省略号显示
							display: -webkit-box; //弹性盒模型
							-webkit-box-orient: vertical; //上下垂直
							-webkit-line-clamp: 2; //自定义行数
						}

						.space-between1 {
							display: flex;
							margin-top:60rpx;
							justify-content: space-between;

							.c6:nth-child(1) {
								font-size: 30rpx;
								font-weight: 700;
								margin-top:auto;
								color:#d02c1e;
							}

							.cc2 {
								width: 200rpx;
								// 解决溢出问题的三行代码
								display: flex;
								flex-wrap: wrap;
								justify-content: flex-end;

								>image {
									width: 60rpx;
									height: 60rpx;
									margin-left: -15px;
									border-radius: 50%;
								}
							}
						}
					}
				}

				.order-bottom {
					height: 90rpx;
					padding: 0 28rpx;
					box-sizing: border-box;

					.controls-btn {
						width: 150rpx;
						height: 50rpx;
						background: linear-gradient(0deg, #b07412 0%, #e3ba5b 100%);
						border-radius: 25rpx;
						color: #ffffff;
						text-align: center;
						line-height: 50rpx;
						display: inline-block;
						padding: 0 !important;
						font-size: 26rpx;
						box-sizing: border-box;
					}

					.material-flow-btn {
						width: 150rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						border: 1rpx solid #CCCCCC;
						box-sizing: border-box;
						border-radius: 25rpx;
						display: inline-block;
						padding: 0 !important;
						font-size: 26rpx;
					}

					uni-button:after {
						content: " ";
						border: none !important;
					}
				}
			}
		}

		.kong {
			height: 100vh;
			text-align: center;

			>image {
				width: 300rpx;
				height: 300rpx;
				margin-top: 300rpx;
			}
		}

		// 弹框
		.pop {
			padding: 57rpx 46rpx;

			.pop-title {
				display: flex;

				.u-icon {
					position: absolute;
				}

				>text {
					margin: 0 auto;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Bold;
				}
			}

			.title-des {
				text-align: center;
				margin: 50rpx 0 34rpx 0;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
			}

			.swiper-mouay {
				text-align: center;
				padding-bottom: 46rpx;
				color: #E80000;
				border-bottom: 1rpx solid #EEEEEE;

				>text:nth-child(odd) {
					font-size: 48rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: bold;
				}

				>text:nth-child(even) {
					font-size: 30rpx;
				}
			}

			.pop-number {
				>view:nth-child(1) {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;

					>text {
						display: block;
					}
				}
			}
		}
	}
</style>